import React from 'react';
import { Form } from 'antd';
import { SimpleRangeDateC, FirstHeaderC, SecondHeaderC, PrimaryC } from '../../components';
import moment from 'moment';

class SimpleRangeDateCDemo extends React.Component {
  constructor(props) {
    super(props);

    this.formRef = React.createRef();

    this.state = {
      start1: undefined,
      end1: undefined,
      hasDataBD1: undefined,
      hasDataED: undefined,
    };

    setTimeout(() => {
      this.setState({
        start1: moment('2020-01-01'),
        end1: moment('2020-03-01'),
        hasDataBD1: moment('2019-01-01'),
        hasDataED1: moment('2020-09-30'),
      });
    }, 2000);
  }

  changeDate = () => {
    // 更改日期显示
    this.state.SimpleRangeDateC.setDate([moment('2015-05-01'), moment('2016-11-12')]);
    // 更改可选范围
    this.setState({
      hasDataBD1: moment('2015-01-01'),
      hasDataED1: moment('2016-12-31'),
    });
  };

  reset = () => {
    const value = this.formRef.current.getFieldsValue();

    this.formRef.current.resetFields(); // 重置条件
    this.firstExampleRef.reset();
  };

  change = () => {
    this.firstExampleRef.setDate(moment('2020-01-01'), moment('2020-05-01'));
  };

  render() {
    return (
      <Form ref={this.formRef} style={{ padding: '20px', width: '800px' }}>
        <FirstHeaderC title='简单时间区间组件' />
        <SecondHeaderC title='场景1 日期区间默认值，重置/修改' />
        <SimpleRangeDateC
          onRef={(ref) => (this.firstExampleRef = ref)}
          form={this.formRef.current} // form对象
          title='日期区间默认值,' // 显示名称
          allowClear={true}
          startIndex='start1'
          endIndex='end1'
          startOnChange={(e) => {
            console.log('111', e);
          }}
          endOnChange={(e) => {
            console.log('222', e);
          }}
          startInitial={moment('2023-06-04')}
          endInitial={moment('2023-06-30')}
        />
        <PrimaryC title='重置' onClick={this.reset} />
        <PrimaryC title='修改' onClick={this.change} />
        <SecondHeaderC title='场景2 时间选择限制' />
        <SimpleRangeDateC
          form={this.formRef.current} // form对象
          title='月份区间' // 显示名称
          startIndex='start2'
          endIndex='end2'
          allowClear={true}
          disableStart={moment('2023-06-04')}
          disableEnd={moment('2023-06-30')}
        />
        <SecondHeaderC title='场景3 校验规则,月份选择' />
        <SimpleRangeDateC
          form={this.formRef.current} // form对象
          title='日期区间' // 显示名称
          startIndex='start3'
          endIndex='end3'
          dataType={''}
          allowClear={true}
          rules={{ beginDate: [{ required: true }], endDate: [{ required: true }] }}
        />
        <SecondHeaderC title='场景4 禁用今天往后的日期/禁用' />
        <SimpleRangeDateC
          form={this.formRef.current} // form对象
          title='日期区间' // 显示名称
          startIndex='start4'
          endIndex='end4'
          disableFuture={true}
        />
        {/* <SecondHeaderC title='场景3 校验规则' /> */}
        <SimpleRangeDateC
          form={this.formRef.current} // form对象
          title='日期区间' // 显示名称
          startIndex='start5'
          endIndex='end5'
          disabled={true}
        />
      </Form>
    );
  }
}

export default SimpleRangeDateCDemo;
